Component({
        options: {
                multipleSlots: true // 在组件定义时的选项中启用多slot支持
        },
        /**
         * 组件的属性列表
         */
        properties: {
                extClass: {
                        type: String,
                        value: ''
                },
                title: {
                        type: String,
                        value: ''
                },
                background: {
                        type: String,
                        value: ''
                },
                color: {
                        type: String,
                        value: ''
                },
                back: {
                        type: Boolean,
                        value: true
                },
                loading: {
                        type: Boolean,
                        value: false
                },
                homeButton: {
                        type: Boolean,
                        value: false,
                },
                animated: {
                        // 显示隐藏的时候opacity动画效果
                        type: Boolean,
                        value: true
                },
                show: {
                        // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
                        type: Boolean,
                        value: true,
                        observer: '_showChange'
                },
                // back为true的时候，返回的页面深度
                delta: {
                        type: Number,
                        value: 1
                },
        },
        /**
         * 组件的初始数据
         */
        data: {
                displayStyle: '',
                statusBarHeight: 0
        },
        lifetimes: {
                attached() {
                        const rect = wx.getMenuButtonBoundingClientRect();
                        const deviceInfo = wx.getDeviceInfo();
                        const isAndroid = deviceInfo.platform === 'android';
                        const isDevtools = deviceInfo.platform === 'devtools';
                        const windowInfo = wx.getWindowInfo();
                        this.setData({
                                ios: !isAndroid,
                                innerPaddingRight: `padding-right: ${windowInfo.windowWidth - rect.left}px`,
                                leftWidth: `width: ${windowInfo.windowWidth - rect.left }px`,
                                safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${windowInfo.safeArea.top}px); padding-top: ${windowInfo.safeArea.top}px` : ``,
                                statusBarHeight: windowInfo.statusBarHeight
                        })
                },
        },
        /**
         * 组件的方法列表
         */
        methods: {
                _showChange(show) {
                        const animated = this.data.animated
                        let displayStyle = ''
                        if (animated) {
                                displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`
                        } else {
                                displayStyle = `display: ${show ? '' : 'none'}`
                        }
                        this.setData({
                                displayStyle
                        })
                },
                back() {
                        const that = this;
                        const data = that.data;
                        if (data.delta) {
                                wx.navigateBack({
                                        delta: data.delta
                                });
                                return false;
                        }
                        that.triggerEvent('handleBack', {
                                delta: data.delta
                        }, {})
                }
        },
})